<template>
        <el-table
            ref="menuTable"
            :indent="48"
            :data="list"
            border
            fit
            highlight-current-row
            :max-height="tableHeight"
          >
          <el-table-column type="expand" >
            <template slot-scope="props">
              <div class="flex" style="padding: 0 0 10px 0">
                <div  class="amount">
                  <span>每行图标数量 : </span>
                  <el-radio v-model="radio" label="1">4</el-radio>
                  <el-radio v-model="radio" label="2">5</el-radio>
                </div>
                <el-button
                  type="success"
                  @click="addList()"
                  v-if="hasBtn('menuManage:add') && searchObj.PlatFormType == 'APP' "
                  >新增图标</el-button
                >
              </div>
              
          
              <div class="flex" >
              
                <div class="app-show app-border">
                  <div class="show-box">
                    <div v-for="item of props.row.ChildList" :key="item.MenuSort" class="showlist" :class="radio == 2 ? 'listWidth' : ''">
                      <div class="showimg showimg-border">
                        <img width="100%" height="100%" :src="item.MenuIcon" alt="">
                      </div>
                      <div class="showTitle">{{item.MenuName}}</div>
                    </div>
                  </div>
                </div>

                <div class="app-edit app-border">
                  
                  <div class="flex flex-warp" >
                    <div v-for="item of props.row.ChildList" :key="item.MenuSort" class="list flex">
                      <div>
                        <div>
                          <span>标题:</span>
                          <el-input :disabled="!item.MenuType" class="title-put" v-model="item.MenuName" placeholder="请输入内容"></el-input>
                        </div>
                        <div>
                          <span>路径:</span>
                          <el-input :disabled="!item.MenuType" class="title-put" v-model="item.MenuPath" placeholder="请输入内容"></el-input>
                        </div>
                        <div>
                          <span>排序:</span>
                          <el-input :disabled="!item.MenuType" class="title-put" v-model="item.MenuSort" placeholder="请输入内容"></el-input>
                        </div>
                        <div>
                          <span>备注:</span>
                          <el-input :disabled="!item.MenuType" class="title-put" v-model="item.Remark" placeholder="请输入内容"></el-input>
                        </div>
                      </div>
                      <div class="img">
                        <el-upload
                          :disabled="!item.MenuType"
                          :action="upload"
                          :headers="headerObj"
                          list-type="picture-card"
                          :on-preview="handlePictureCardPreview"
                          :auto-upload="true"
                          :on-remove="handleRemove"
                          :on-success="upLoadSuccess"
                          :limit=1>
                          <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                          <img  width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                      </div>
                      <div  class="edit">
                        <div>
                          <el-button v-if="!item.MenuType"  type="success" @click="editList(item)">编辑</el-button>
                          <el-button v-else type="success" @click="appSave(props.row, item)">保存</el-button>
                        </div>
                        <div>
                          <el-button v-if="!item.MenuType" type="danger" @click="deleList(item.Id)">删除</el-button>
                          <el-button v-else type="danger" @click="item.MenuType = false">取消</el-button>
                        </div>
                      </div>
                    </div>
                
                  </div>
                  
                </div>
                </div>
              
            </template>  
          </el-table-column>
          <el-table-column
            label="菜单名称"
            align="center"
            prop="MenuName"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="菜单排序"
            align="center"
            prop="MenuSort"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="菜单备注"
            align="center"
            prop="MenuRemarkSort"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="编辑"
            align="center"
            show-overflow-tooltip
          >
            <template>
              <el-button
                size="small"
                >编辑</el-button
              >
              <el-button
                size="small"
                >删除</el-button
              >
            </template>
          </el-table-column>
          
          
          
          </el-table>
    
</template>
<script>
import { GetUploadToken } from '@/api/ShareSetting/poster'
import { getList, deleteApi, save } from '@/api/system/menu'
export default {
    name:'',
    props : {
        
    },
    data (){
        return {
            addAppMenus: false,
            dialogImageUrl: '',
            dialogVisible: false,
            upload: process.env.VUE_APP_UPLOAD_API + '/api/Tools/UploadFiles',
            headerObj: {
                Authorization: ''
            },
            appObj: {},
            appTitle: '',
            editId: '',
            radio: '1',
            PlatFormType: "PC",
            addMenuVisible: false,
            dialogTableTitle: "新增菜单",
            isAdd: false,
            isAddChild: false,
            menuObj: {},
            list: [],
            total: 0,
            listLoading: true,
            searchObjTmpl: {},
            searchObj: {
                PlatFormType: 'PC',
                // PlatFormType: 'APP',
                MenuName: "",
                currentPage: 0,
                MenuPath: '',
                MenuType: true,//True：目录，False：菜单
                MenuSort: '',
                Remark: ''
            },
            listQuery: {
                IsPaging: false, //是否分页
                SortName: 'MenuSort',
                SortType: false
            },
            tableHeight: 0
        };
    },

  created () {
  },

  methods: {
    async addAppMenu (){
      this.appObj = {
        "Id": "00000000-0000-0000-0000-000000000000",
        "MenuName": this.searchObj.MenuName,
        "MenuType": true, //True：目录，False：菜单
        "MenuSort": this.searchObj.MenuSort,//排序
        "PlatFormType": "APP",
        "Remark": this.searchObj.Remark, //备注
        "ChildList": []

      }

      const {Data} = await save(this.appObj)
      console.log(123)
      console.log(Data)
    },
    async appSave (MenuParentId, item){
      console.log(MenuParentId)
      const obj = {
        "MenuName": item.MenuName, //页面名称
        "MenuPath": item.MenuPath, //页面地址
        "MenuParentId": MenuParentId.Id, //上级菜单Id
        "MenuIcon": item.MenuIcon, //菜单图标
        "MenuType": false, //True：目录，False：菜单
        "MenuSort": item.MenuSort, //排序
        "PlatFormType": "APP", //平台类型
        "Remark": item.Remark //备注
      }
        if(item.Id != "00000000-0000-0000-0000-000000000000"){
          obj.Id = item.Id
        }
      await save(obj).then((res) => {
              this.$notify({
                title: '修改成功',
                message: 'success',
                type: 'success',
                duration: 2000
              })
              this.getList()
      })
      // let addObj = this.$deepClone(this.addObj)
    },
    addList (){
      this.appObj = {
        "Id": "00000000-0000-0000-0000-000000000000",
        "MenuName": this.searchObj.MenuName, //名称
        "MenuPath": this.searchObj.MenuPath, //路径
        "MenuType": false, //True：目录，False：菜单
        "MenuSort": this.searchObj.MenuSort, //排序
        "PlatFormType": "APP",
        "Remark": this.searchObj.Remark
      }
      for (let item of this.list){
        item.ChildList.push(this.appObj)
        console.log(item)
      }
      this.appObj = {}
    },
    async deleList (id) {
      this.$confirm('确认删除此条数据吗？').then(async () => {
        if (id == "00000000-0000-0000-0000-000000000000"){
          this.$notify({
            title: '删除成功',
            message: 'success',
            type: 'success',
            duration: 2000
          })
          return
        }
        const { code } = await deleteApi({
          Id: id
        })
        if (code == 200) {
          this.$notify({
            title: '删除成功',
            message: 'success',
            type: 'success',
            duration: 2000
          })
          this.getList()
        }
      })

    },
    editList (item){
      console.log(item)
      for (let item of this.list){
        for (let res of item.ChildList){
          res.MenuType = false
        }
      }
      item.MenuType = true
    },
    
    handleRemove(file, fileList) {
        console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    upLoadSuccess (res) {
      console.log('上传结束', res)
      for (let item of this.list){
        for (let ite of item.ChildList){
          if(ite.MenuType){
            ite.MenuIcon = res.data.fileUrl
            console.log(ite)
          }
        }
        
    
        
      }
        //  else {
        //   if (this.sstimer) {
        //     clearTimeout(this.sstimer)
        //   }
        //   this.sstimer = setTimeout(() => {
        //     this.$notify({
        //       title: '上传失败',
        //       message: res.msg,
        //       type: 'warning',
        //       duration: 4500
        //     })
        //   }, 800)
        // }
      // }
    },
    async GetUploadTokenFun () {
      let { Data } = await GetUploadToken()
      this.headerObj.Authorization = Data || ''
    }
  }
}
</script>
<style scoped>
.app-border {
  border: 1px solid #d3dce6;
}
.app-show {
  min-width: 400px;
  width: 30%;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  overflow-y: scroll;
  overflow: hidden;
}
.app-edit {
  padding: 15px 0 0 15px;
  margin-left: 10px;
  width: 70%;
  height: 500px;
  overflow: hidden;
  overflow-y: scroll;
  min-width: 640px;
}
.grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .bg-purple {
    border: 1px solid #d3dce6;
    margin-bottom: 10px;
    width: 100%;
    height: 80px;
    margin-left: 5%;
  }
  .showlist {
    width: 25%;
    margin-top: 10px;
    text-align: center;
  }
  .listWidth {
    width: 20%;
  }
  .list {
    width: 600px;
    height: 200px;
    padding: 15px 0 0 15px;
    margin: 10px;
    border-radius: 20px;
    border: 1px solid #d3dce6;
  }
  .show-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    height: 100px;
  }
  .showimg {
    width: 70px;
    height: 70px;
    border: 1px solid #d3dce6;
    border-radius: 50%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 5px;
    overflow: hidden;
  }
  .showimg-border{
    border: 0;
    border-radius: 0;
  }
  .title-put {
    width: 200px;
    margin: 0 30px 5px 10px;
  }
  .diawidth{
    width: 50%;
  }
  .edit {
    margin: 20px 0 0 50px;
  }
  .edit :first-child{
    margin-bottom: 20px;
  }
  .flex-warp {
    flex-wrap: wrap;
  }
  .img {
    margin-top: 10px;
    width: 150px;
    height: 150px;
    overflow: hidden;
  }
  .amount {
    line-height: 40px;
    margin: 0  20px 0 0;
  }
</style>